<template>
  <div class="bottom">
    <el-card shadow="hover">
      <template #header>
        关键词搜索
      </template>
      <div class="search-top">
        <div class="search-common">
          <div class="title">搜索用户数</div>
          <div class="value">113,918</div>
          <div id="userCount"></div>
        </div>
        <div class="search-common">
          <div class="title">搜索量</div>
          <div class="value">214,215</div>
          <div id="qulity"></div>
        </div>
      </div>
      <el-table :data="searchTableData.slice((page - 1) * 5, page * 5)">
        <el-table-column prop="orderNo" label="排名"></el-table-column>
        <el-table-column prop="word" label="关键字"></el-table-column>
        <el-table-column prop="count" label="搜索数量"></el-table-column>
        <el-table-column prop="user" label="搜索用户数"></el-table-column>
        <el-table-column prop="scale" label="搜索占比"></el-table-column>
      </el-table>
      <el-pagination :page-size="5" v-model:current-page="page" layout="prev, pager, next"
        :total="searchTableData.length" />
    </el-card>
    <el-card shadow="hover">
      <template #header>
        分类销售排行
        <el-radio-group v-model="radioSelect" size="small">
          <el-radio-button label="品类"></el-radio-button>
          <el-radio-button label="商品"></el-radio-button>
        </el-radio-group>
      </template>
      <div id="cate_goods"></div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import * as echarts from 'echarts'
import { useReportInfoData } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat'

const { numberFormat, moneyFormat } = useFormat()
const reportInfoDataStore = useReportInfoData()

const getOptions = (name: string, xAxis: string[], data: number[]) => {
  return {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false, // 两侧不留白
        data: xAxis,
        show: false
      }
    ],
    yAxis: [
      {
        type: 'value',
        show: false
      }
    ],
    series: [
      {
        name,
        type: 'line',
        // stack: 'Total',
        smooth: true,
        lineStyle: {
          // width: 0,
          color: 'rgb(107, 206, 255)'
        },
        showSymbol: false,
        areaStyle: { // 区域填充样式
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(215, 238, 255)'
            },
            {
              offset: 1,
              // color: 'rgb(1, 191, 236)'
              color: 'rgb(28, 255, 165)'
            }
          ])
        },
        // 折线点样式
        itemStyle: {

        },
        emphasis: {
          focus: 'series'
        },
        data
      },
    ],
    tooltip: {
      trigger: 'axis',
      confine: true // 限定在固定区域显示提示
    }
  }
}

let userCount: any, qulity: any
onMounted(() => {
  userCount = echarts.init(document.querySelector('#userCount') as HTMLElement)
  qulity = echarts.init(document.querySelector('#qulity') as HTMLElement)
})
const searchWord = computed(() => reportInfoDataStore.reportData.searchWord)

// 加工表格需要的数据
// let searchTableData = []
let searchTableData = computed(() => searchWord.value?.map((item: any, index: number) => ({
  orderNo: index + 1,
  word: item.word,
  count: item.count,
  user: item.user,
  scale: (item.user / item.count * 100).toFixed(2) + '%'
})
) || [])

watch(() => reportInfoDataStore.reportData, () => {
  const xAxis = searchWord.value?.map((item: any) => item.word)

  const data = searchWord.value?.map((item: any) => item.count)
  userCount?.setOption(getOptions('搜索用户数', xAxis, data))

  const data2 = searchWord.value?.map((item: any) => item.user)
  qulity?.setOption(getOptions('搜索量', xAxis, data2))

  window.addEventListener('resize', () => {
    userCount?.resize()
    qulity?.resize()
    cate_goods?.resize()
  })
})
// 表格页码
const page = ref(1)

// 饼状图
let cate_goods: any
const radioSelect = ref('品类')
const saleRank = computed(() => reportInfoDataStore.reportData.saleRank)
// 加工数据
const pieChartData = computed(() => {
  const data = {
    categoryList: [],
    cTotal: 0,
    goodsList: [],
    gTotal: 0
  }
  if (saleRank.value) {
    const { category: { axisX: axisX1, data1 }, goods: { axisX: axisX2, data1: data2 } } = saleRank.value
    data.cTotal = data1.reduce((pre, cur) => pre + cur, 0)
    data.categoryList = axisX1.map((item, index) => {
      const percent = (data1[index] / data.cTotal * 100).toFixed(2) + '%'
      return {
        name: item + '|' + percent,
        value: data1[index],
        percent,
        labelName: item
      }
    })

    data.gTotal = data2.reduce((pre, cur) => pre + cur, 0)
    data.goodsList = axisX2.map((item, index) => {
      const percent = (data2[index] / data.gTotal * 100).toFixed(2) + '%'
      return {
        name: item + '|' + percent,
        value: data2[index],
        percent,
        labelName: item
      }
    })
  }
  return data
})

watch(radioSelect, () => {
  cate_goods?.setOption(getPieOptions())
})

const getPieOptions = () => {
  const { categoryList, goodsList, cTotal, gTotal } = pieChartData.value
  const list = radioSelect.value == '品类' ? categoryList : goodsList
  const total = radioSelect.value == '品类' ? cTotal : gTotal
  return {
    title: [
      {
        text: `${radioSelect.value}分布`,
        textStyle: {
          fontSize: 14,
          color: '#666'
        },
        left: 20,
        top: 20
      },
      {
        text: '累计订单量',
        subtext: total,
        textStyle: {
          fontSize: 14,
          color: '#999',
        },
        subtextStyle: {
          fontSize: 28,
          color: '#333'
        },
        left: '38%',
        top: '42%',
        textAlign: 'center'
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter(params: any) {
        return `${radioSelect.value}分布<br>
          ${params.marker + params.data.labelName}<br>
          ${params.marker + '数量：' + params.data.value}<br>
          ${params.marker + '占比：' + params.data.percent}
          `
      }
    },
    legend: {
      top: 'middle',
      right: 'right',
      orient: 'vertical',
      textStyle: {
        color: '#8c8c8c'
      }
    },
    series: [
      {
        name: `${radioSelect.value}分布`,
        type: 'pie',
        radius: ['35%', '50%'],
        avoidLabelOverlap: false,
        center: ['40%', '50%'],
        itemStyle: {
          borderRadius: 0,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          // show: false,
          position: 'outside',
          formatter(params: any) {
            return params.data.labelName
          },
          color: '#333'
        },
        // emphasis: {
        //   label: {
        //     // show: false,
        //     // fontSize: 40,
        //     // fontWeight: 'bold'
        //   }
        // },
        labelLine: {
          show: true
        },
        data: list
      }
    ],
  }
}

onMounted(() => {
  cate_goods = echarts.init(document.querySelector('#cate_goods') as HTMLElement)
})
watch(() => reportInfoDataStore.reportData, () => {
  cate_goods?.setOption(getPieOptions())
})

</script>

<style scoped lang="scss">
.bottom {
  display: flex;
  margin-top: 20px;

  .el-card {
    flex: 1
  }
}

:deep(.el-card__header) {
  display: flex;
  justify-content: space-between;
}

.el-card+.el-card {
  margin-left: 20px;
}

.title {
  font-size: 12px;
  color: #999
}

.value {
  font-size: 24px;
  line-height: 36px;
}

.search-top {
  display: flex;

  .search-common {
    flex: 1
  }
}

#userCount,
#qulity {
  height: 50px;
}

.search-common+.search-common {
  margin-left: 10px;
}

#cate_goods {
  height: 440px;
}
</style>